<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
		
		<!--配置样式-->
		<style>
			/* 渲染没有完成时不展现 */
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3 v-cloak>{{hello}}</h3>
			<!--以优化后的效果进行展现 内部兼容了v-cloak-->
			<h3 v-text="msg"></h3>
			<!--以html解析之后的效果进行展现-->
			<h3 v-html="html"></h3>
			<!--v-pre指令 跳过vue的解析的过程,直接展现数据-->
			<h3 v-pre>{{name}}</h3>
			<!--v-once指令  元素只被解析一次-->
			<h3 v-once>{{once}}</h3>
			<!--测试双向数据绑定 1.数据给用户展现的  2.用户需要传数据给服务器-->
			<input  v-model="model" />
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const a =new Vue({
				el:"#app",
				data:{
					hello:"入门案例",
					msg:"测试v-text指令",
					html:'<h1>html效果展现</h1>',
					once:"测试解析次数",
					model:'测试双向数据绑定'
				}
			})
		</script>
	</body>
</html>
